<template>
  <view class="friendsCircle-content-item" v-for="(v, i) in moment" :key="i">
    <head-image :name="mine.nickName" :url="mine.headImageThumb" :size="90"></head-image>
    <view class="friendsCircle-content-right" @click="goDetail(v)">

      <view class="friendsCircle-content-nickName">{{ mine.nickName }}
        <uni-icons @longpress.stop="onDelete(v, i)" style="margin-left: auto; font-weight: normal !important;"
                   type="trash-filled" size="24"></uni-icons>
      </view>

      <view class="friendsCircle-content-text">{{ v.content.content }}</view>

      <view class="friendsCircle-content-video" v-if="v.topicType=='VIDEO' && v.content.files.length>0">
        <n-video :src="v.content.files[0].url"  class="friendsCircle-content-video-img"></n-video>
      </view>

      <view v-if="v.topicType=='IMAGE'">
        <image v-for="(item, ii) in v.content.files" :key="ii" class="friendsCircle-content-img"
               :class="'fci' + v.content.files.length" :src="item.thumbUrl" mode="aspectFill"
               @click="pimgs(v.content.files, ii)"></image>
      </view>
      <!--      <view class="friendsCircle-content-tools">-->
      <!--        <view class="friendsCircle-content-time">{{ getTimer(v.createdTime) }}</view>-->
      <!--      </view>-->

      <view class="friendsCircle-content-tools">
        <view class="friendsCircle-content-time">{{ getTimer(v.createdTime) }}</view>
        <!--        <view class="friendsCircle-content-tool" :class="{ tabon: i == showToolIndex }">-->

        <!--          <uni-icons class="btn-side right" style="font-weight: bold" type="more-filled" size="18" @click="showTool(i)"></uni-icons>-->

        <!--          <view class="friendsCircle-content-tool-absolute">-->
        <!--            <view class="friendsCircle-popup">-->
        <!--              <view class="friendsCircle-popup-item" @click="zan(v,i)">-->
        <!--                <view class="friendsCircle-popup-icon wxfont zan"></view>-->
        <!--                <view class="friendsCircle-popup-text" v-if="v.like=='Y'">取消</view>-->
        <!--                <view class="friendsCircle-popup-text" v-else>赞</view>-->
        <!--              </view>-->
        <!--              <view class="friendsCircle-popup-item" @click="comment(v)">-->
        <!--                <view class="friendsCircle-popup-icon wxfont pinglun"></view>-->
        <!--                <view class="friendsCircle-popup-text">评论</view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </view>-->
      </view>

      <!--点赞的人-->
      <view class="friendsCircle-like" v-if="v.likeList && v.likeList.length>0">
        <view class="friendsCircle-like-icon wxfont zan"></view>
        <text class="friendsCircle-like-text" v-for="(z,zindex) in v.likeList">{{ z.nickName }}</text>
      </view>

      <!--评论的人-->
      <view class="friendsCircle-comment" v-if="v.replyList && v.replyList.length>0">
        <view class="friendsCircle-comment-item" v-for="(c,ci) in v.replyList" :key="ci">
          <text class="friendsCircle-comment-text" @click="gofriend(c)">{{ c.nickName }}</text>
          <view class="friendsCircle-comment-feedback" v-if="c.replyType=='2'">
            回复
            <text class="friendsCircle-comment-text" @click="gofriend(c)">{{ c.toNickName }}</text>
          </view>
          <view class="friendsCircle-comment-content" v-if="c.content" @click="replyclick(c,ci,i)">
            <text>{{ c.content }}</text>
          </view>
        </view>
      </view>

    </view>
  </view>

  <view class="zfb-tk-send-tool" v-if="toggleMsgBox" :style="{bottom:keyboardHeight+'px'}">
    <form @submit="sendMsg(msg)">
      <view class="zfb-tk-send-tool-c">
        <view class="zfb-tk-send-tool-input-box" @click="msgFocus=true">
          <textarea class="zfb-tk-send-tool-input" :adjust-position="false" :focus="msgFocus" v-model="msg"
                    :placeholder="placeholder" confirm-type="send" @confirm="sendMsg(msg)" hold-keyboard :maxlength="-1"
                    auto-height/>
        </view>
        <view class="zfb-tk-send-tool-text" @click="sendMsg(msg)"
              :style="{ background: msg !== '' ? '#1BC418' : '#F7F7F7', color: msg !== '' ? '#fff' : '#ddd', 'border-color': msg !== '' ? '#1BC418' : '#ddd' }">
          发送
        </view>
      </view>
    </form>
  </view>

</template>

<script>
import {getTimer} from "@/common";
import HeadImage from "../head-image/head-image.vue";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import http from "@/common/request";
import nVideo from "@/components/n-video/n-video.vue";

export default {
  components: {nVideo, UniIcons, HeadImage},
  // 朋友圈列表内容区
  data() {
    return {
      keyboardHeight: 0,
      msg: '',
      msgFocus: false,
      toggleMsgBox: false,
      showToolIndex: null,
      chooseUserIndex: null,
      type: 'msg',
      replydata: ''
    };
  },
  props: {
    moment: {
      type: Array,
      default: []
    }
  },
  computed: {
    avatarTextStyle() {
      return `width: ${this.size}rpx;height:${this.size}rpx;
				color:${this.textColor};font-size:${this.size * 0.6}rpx;`
    },

    mine() {
      return this.userStore.userInfo
    }
  },
  mounted() {
    // #ifdef APP-PLUS
    uni.onKeyboardHeightChange(res => {
      this.keyboardHeight = res.height
    })
    // #endif
  },
  methods: {
    goDetail(item) {
      // 跳转到详情页
      uni.navigateTo({
        url: "/pages/moment/moment-detail?id=" + item.id
      })
    },
    onDelete(v, i) {
      uni.showModal({
        title: '注意',
        content: '确定要删除 ' + v.content.content + ' 吗？',
        success: (res) => {
          if (res.confirm) {
            this.$http({
              url: `/moment/${v.id}`,
              method: 'DELETE',
            }).then(res => {
                this.moment.splice(i, 1);
                uni.showToast({
                  title: '删除成功',
                  icon: 'success',
                  position: 'bottom'
                })
            });
          } else if (res.cancel) {

          }
        }
      });
    },

    replyclick(e, ci, i) {
      this.chooseUserIndex = i
      if (e.canDeleted == 'Y') {
        this.hidenTool()
        uni.showActionSheet({
          itemList: ['复制', '删除'],
          success: (res) => {
            switch (res.tapIndex) {
              case 0:
                uni.setClipboardData({
                  data: e.content,
                  success: function () {
                    uni.showToast({
                      title: '复制成功',
                      icon: 'none',
                      position: 'bottom'
                    })
                  }
                });
                break;
              case 1:
                this.$http.request({
                  url: '/topic/removeReply/' + e.replyId,
                  success: (res) => {
                    if (res.data.code == 200) {
                      uni.showToast({
                        title: '删除成功',
                        icon: 'none'
                      })
                      this.content[i].replyList.splice(ci, 1)
                    }
                  }
                });
                break;
              default:
                break;
            }
          }
        });
      } else {
        this.replydata = e
        this.type = 'reply'
        this.placeholder = '回复' + e.nickName
        this.$nextTick(() => {
          this.toggleMsgBox = true;
          this.msgFocus = true
        })
      }
    },
    comment(e) {
      //评论
      this.showToolIndex = null;
      this.type = 'msg'
      this.placeholder = '评论'
      this.$nextTick(() => {
        this.toggleMsgBox = true;
        this.msgFocus = true
      })
    },

    zan(e, i) {//点赞
      switch (e.like) {
        case 'N':
          this.$http.request({
            url: '/topic/like/' + e.topicId,
            success: (res) => {
              if (res.data.code == 200) {
                this.hidenTool()
                var like = e.like == 'N' ? e.like = 'Y' : e.like = 'N'
                this.content[this.chooseUserIndex].like = like
                this.content[this.chooseUserIndex].likeList.push({
                  userId: this.userInfo.userId,
                  nickName: this.userInfo.nickName,
                  portrait: this.userInfo.portrait
                })
              }
            }
          });
          break;
        case 'Y':
          this.$http.request({
            url: '/topic/cancelLike/' + e.topicId,
            success: (res) => {
              if (res.data.code == 200) {
                this.hidenTool()
                var like = e.like == 'N' ? e.like = 'Y' : e.like = 'N'
                this.content[this.chooseUserIndex].like = like
                var thisObj = this.$fc.arrFindkey({
                  arr: this.content[this.chooseUserIndex].likeList,
                  key: 'userId',
                  val: this.userInfo.userId
                })
                this.content[this.chooseUserIndex].likeList.splice(thisObj.index, 1)
              }
            }
          });
          break;
        default:
          break;
      }
    },
    sendMsg(e) {
      if (!e) {
        return;
      }
      var replyId = ''
      var replyType = ''
      if (this.type == 'msg') {
        replyId = this.content[this.chooseUserIndex].topicId
        replyType = '1'
      }
      if (this.type == 'reply') {
        replyId = this.replydata.replyId
        replyType = '2'
      }

      this.$http({
        url: '/topic/reply',
        method: 'POST',
        data: JSON.stringify({
          replyId: replyId,
          replyType: replyType,
          content: e
        }),
        success: (res) => {
          if (res.data.code == 200) {
            this.hidenTool()
            this.content[this.chooseUserIndex].replyList.push(res.data.data)
          }
        }
      });
      this.msg = ''
    },
    hidenTool() {//隐藏选项和输入框
      this.showToolIndex = null;
      this.toggleMsgBox = false;
    },
    openVideo(e) {
      this.$fc.plusDownload({onlinePath: e}).then(res => {
        this.$fc.plusOpenFile({filePath: res})
      })
    },

    getTimer,
    gofriend(e) {
      uni.navigateTo({
        url: "/pages/common/user-info?id=" + e.id
      })
    },
    pimgs(arr, ii) {
      var imgs = []
      for (var i = 0; i < arr.length; i++) {
        imgs.push(arr[i].originUrl)
      }
      this.$fc.previewImages(imgs, ii)
    },
    showTool(e) {
      this.chooseUserIndex = e
      if (this.showToolIndex === e) {
        this.showToolIndex = null;
      } else {
        this.showToolIndex = e;
      }
    },
  }
};
</script>

<style scoped lang="scss">
.zfb-tk-send-tool {
  background: #f7f7f7;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.zfb-tk-send-tool-c {
  padding: 16rpx 12rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  border: 1px #ddd solid;
  border-left: none;
  border-right: none;
}

.zfb-tk-send-tool-c .zfb-tk-send-tool-btn {
  transition: color 0.5s;
}

.zfb-tk-send-tool .zfb-tk-send-tool-input {
  padding: 0 24rpx;
  box-sizing: border-box !important;
  width: 100%;
  background: #fff;
}

.zfb-tk-send-tool-text {
  white-space: nowrap;
  padding: 10rpx 24rpx;
  border-radius: 12rpx;
  border: 1px #ddd solid;
  background: #f7f7f7;
  color: #ddd;
}

.friendsCircle-content-item {
  display: flex;
  flex-direction: row;
  padding: 24rpx 34rpx;
  border-bottom: 1px #F2F2F2 solid;
}

.friendsCircle-content-avatar {
  border-radius: 10rpx;
  width: 90rpx;
  height: 90rpx;
  min-width: 90rpx;
}

.friendsCircle-content-right {
  display: flex;
  flex-direction: column;
  padding-left: 18rpx;
  flex: 1;
  box-sizing: border-box;
}

.friendsCircle-content-nickName {
  display: flex;
  align-items: center;
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;

  font-size: 30rpx;
  color: #2782D7;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.friendsCircle-content-text {
  font-size: 30rpx;
  color: #333;
}

.friendsCircle-content-imgs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1;
  margin-top: 24rpx;
}

.friendsCircle-content-img {
  max-width: 100%;
}

.friendsCircle-content-img.fci1 {
  height: 550rpx;
  max-width: 500rpx;
  margin-right: 5px;
}

.friendsCircle-content-img.fci2 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci2:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci3 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci3:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci4 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci4:nth-child(2n) {
  margin-right: 185rpx;
}

.friendsCircle-content-img.fci5 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci5:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci6 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci6:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci7 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci7:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci8 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci8:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci9 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci9:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-location {
  font-size: 24rpx;
  color: #5F698C;
  margin-top: 12rpx;
}

.friendsCircle-content-time {
  font-size: 24rpx;
  color: #666666;
  margin-right: auto;
}

.friendsCircle-content-tools {
  margin-top: 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 14rpx;
}

.friendsCircle-content-tool {
  padding: 4rpx 16rpx;
  border-radius: 10rpx;
  background-color: #F8F8FA;
  color: #63678C;
  display: flex;
  flex-direction: row;
  position: relative;
}

.tabon .friendsCircle-content-tool-absolute {
  display: block;
}

.friendsCircle-content-tool-absolute {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.friendsCircle-popup {
  margin-right: 24rpx;
  border-radius: 12rpx;
  background-color: rgba(0, 0, 0, 0.7);
  height: 75rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24rpx;
}

.friendsCircle-popup-item {
  color: #fff;
  padding: 0 25rpx;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.friendsCircle-popup-item:nth-child(1):active .friendsCircle-popup-icon {
  font-size: 56rpx;
}

.friendsCircle-popup-icon {
  font-size: 46rpx;
}

.friendsCircle-popup-text {
  white-space: nowrap;
}

.friendsCircle-like {
  border-radius: 8rpx;
  padding: 12rpx;
  background-color: #F7F7F7;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1px;
}

.friendsCircle-like-icon, .friendsCircle-like-text, .friendsCircle-comment-text {
  color: #5F698C !important;
  font-size: 28rpx;
}

.friendsCircle-comment-feedback .friendsCircle-comment-text {
  margin: 0 6rpx;
}

.friendsCircle-comment-text::after {
  content: ":";
  color: #333;
}

.friendsCircle-like-text {
  margin-left: 4rpx;
  margin-right: 10rpx;
}

.friendsCircle-like-text::after {
  content: ",";
}

.friendsCircle-like-text:nth-last-child(1)::after {
  content: "";
}

.friendsCircle-comment {
  background-color: #F7F7F7;
  border-radius: 8rpx;
}

.friendsCircle-comment-item {
  line-height: 40rpx;
  font-size: 28rpx;
  padding: 12rpx;
  white-space: pre-wrap;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.friendsCircle-comment-feedback {
  display: inline-block;
}

.friendsCircle-content-video {
  width: auto;
  max-width: 400rpx;
  position: relative;
  margin-top: 24rpx;
}

.friendsCircle-content-video-img {
  min-width: 200rpx;
  max-width: 400rpx;
  height: 300rpx;
  border: 8rpx solid #ebebf5;
  cursor: pointer;
}

.friendsCircle-content-video-icon {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80rpx !important;
  height: 80rpx !important;
  transform: translate(-50%, -50%);
}

.friendsCircle-comment-content {
}

.friendsCircle-comment-content text {
  word-break: break-all;
}

.zfb-tk-send-tool-input-box {
  overflow: auto;
  width: 100%;
  margin: 0 12rpx;
  min-height: 75rpx;
  background-color: #fff;
  border-radius: 24rpx;
  padding-top: 18rpx;
  max-height: 225rpx;
  box-sizing: border-box;
}
</style>
